/**
 * 学习目标：创建React组件-函数式组件
 */
import React from 'react';
import ReactDOM from 'react-dom';

// 创建时:
// 1. 组件名必须首字母大写
function Hello() {
  return <h1>Hello React</h1>;
  // 2. 表示不渲染任何内容, 返回一个null
  // return null;
}

const divNode = (
  <div>
    {/* 使用时, 💥React对大小写敏感  */}
    {/* ✅ */}
    <Hello></Hello>
    {/* ❌ */}
    <hello></hello>

    {/* 💥 下方是普通函数, 而不是函数组件 */}
    {hello()}
  </div>
);

// 普通函数
function hello() {
  return <h1>hello React</h1>;
}

ReactDOM.render(divNode, document.getElementById('root'));
